<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <link rel="stylesheet" th:href="@{/js/layuiadmin-1.2.1/style/dtree/dtree.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/js/layuiadmin-1.2.1/style/dtree/font/dtreefont.css}" media="all">
    <th:block th:include="include :: header('分配功能权限')" />
    <style>
        .west {width:310px;}
        .layui-nav {background: #FFF;color:#000;width:310px;}
        .layui-body {left:310px;}
        .layui-logo{color: #fff;height: 41px;line-height: 41px;font-size: 16px}
        .layui-logo span{display: block;width: 337px;float: left;margin-left: 10px;}

        .layui-side-scroll{border-right: 1px solid #f6f6f6;width:310px;}
        .layui-icon{float: right}
        .layui-icon-shrink-right:before {background-color:rgba(243,160,65,0.9)}
        .layui-icon-spread-left:before {background-color:rgba(243,160,65,0.9)}
    </style>
</head>
<body>
<div class="main-container" id="main-container">
	<div class="main-content">
		<div class="west layui-side">
            <div class="layui-side-scroll" >
                <div class="layui-logo">
                    <span >菜单列表</span>
                    <a href="javascript:;" layadmin-event="flexible" class="menuBtn">
                        <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible" style="color: #fff;float: right"></i>
                    </a>
                </div>
                <div class="layui-nav layui-nav-tree">
                    <div id="dhtree" class="demo-tree demo-tree-box"></div>
                </div>
            </div>
            <div class="panel layout-expand layui-expand-west" id="panel" style="display: none; width: 114px; left: 0px; top: 0px;height: 41px;color: #fff;">
                <div class="panel-header">
                    <div class="panel-tool"  id="panel-tool" style="text-align: center; width: 114px;height: 41px;line-height: 41px;font-size: 16px;">
                        <span class="panel-body panel-title" style="width: 114px;">菜单列表</span>
                        <a href="javascript:;" class="menuBtn" >
                            <i class="layui-icon layui-icon-spread-left" id="LAY_app_flexible" style="color: #fff;float: right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-body" id="LAY_app_body">
        	<div class="mid-content">
				<table class="layui-hide" id="dhtable" lay-filter="ftable"></table>
				<p class="f_red" style="font-size:18px;text-align:center;padding-top:10px;">分配权限后，请点击右下角 “确定” 按钮保存哦~</p>
			</div>
		</div>
	</div>
</div>
<th:block th:include="include :: footer" />
 <script th:src="@{/dhecp/js/left-tree.js?v=1}"></script>
<script type="text/html" id="cList">
	<input type="checkbox" name="bList" value="{{d.bList}}"  lay-filter="bList" lay-skin="primary" {{ d.bList == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="cView">
	<input type="checkbox" name="bView" value="{{d.bView}}"  lay-filter="bView" lay-skin="primary" {{ d.bView == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="cAdd">
	<input type="checkbox" name="bAdd" value="{{d.bAdd}}"  lay-filter="bAdd" lay-skin="primary" {{ d.bAdd == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="cEdit">
	<input type="checkbox" name="bEdit" value="{{d.bEdit}}"  lay-filter="bEdit" lay-skin="primary" {{ d.bEdit == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="cDelete">
	<input type="checkbox" name="bDelete" value="{{d.bDelete}}"  lay-filter="bDelete" lay-skin="primary" {{ d.bDelete == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="cCancel">
	<input type="checkbox" name="bCancel" value="{{d.bCancel}}"  lay-filter="bCancel" lay-skin="primary" {{ d.bCancel == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="cFlow">
	<input type="checkbox" name="bFlow" value="{{d.bFlow}}"  lay-filter="bFlow" lay-skin="primary" {{ d.bFlow == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="cImport">
	<input type="checkbox" name="bImport" value="{{d.bImport}}"  lay-filter="bImport" lay-skin="primary" {{ d.bImport == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="cExport">
	<input type="checkbox" name="bExport" value="{{d.bExport}}"  lay-filter="bExport" lay-skin="primary" {{ d.bExport == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="cPrint">
	<input type="checkbox" name="bPrint" value="{{d.bPrint}}"  lay-filter="bPrint" lay-skin="primary" {{ d.bPrint == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="cFileUp">
	<input type="checkbox" name="bFileUp" value="{{d.bFileUp}}"  lay-filter="bFileUp" lay-skin="primary" {{ d.bFileUp == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="cFileDown">
	<input type="checkbox" name="bFileDown" value="{{d.bFileDown}}"  lay-filter="bFileDown" lay-skin="primary" {{ d.bFileDown == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="operation">
	<button onclick="kzbtn('{{d.moduleTable}}')" style="background:#449de9;color:#fff;border:none;padding:2px 5px;cursor:pointer;">编辑</button>
</script>
<script type="text/html" id="isbtn">
	<div style="display:inline;" onclick="isqy('{{d.LAY_TABLE_INDEX}}')">
		<input type="checkbox" {{d.bEnable ?'checked':''}}  name="{{d.buttonMark}}" onclick="isqy('{{d.buttonMark}}')" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
	</div>
	
</script>
<script type="text/html" id="opdhtable">
	<table class="layui-hide" id="zdhtable" lay-filter="ftable2"></table>
</script>
<script type="text/javascript">
 /*<![CDATA[*/
 var pid = "[[${pid}]]";
 var vType = "[[${vType}]]";
 /*]]>*/
 $(".layui-logo").css({"background":pellucidityTen,"text-align":"center"});
 $(".layui-expand-west").css({"background": pellucidityTen,position: "absolute"});
var dataStr = [];setList = ['bList','bView','bAdd','bEdit','bDelete','bCancel','bFlow','bImport','bExport','bPrint','bFileUp','bFileDown'];
$(function(){
	getData("/system/userandrolejurisdiction/list?menuPguid=1");	
})

layui.use(['form', 'layedit', 'laydate','table'], function(){
  var form = layui.form,layer = layui.layer,layedit = layui.layedit,laydate = layui.laydate,table = layui.table;

//    //监听指定开关
//    form.on('switch(switchTest)', function(data){
     
// 	  console.log($(this).html(),999)
//     // layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
//     //   offset: '6px'
//     // });

//   });

    //监听指定开关

	// table.on('ch(ftable2)', function (obj) {
	// 	console.log(obj,888)
	// })

	table.on('checkbox(ftable2)', function(obj){
		console.log(obj)
	})
	table.on('row(ftable2)', function(obj){
      console.log(obj.tr) //得到当前行元素对象
      console.log(obj.data) //得到当前行数据
    });

   window.kzbtn=function(moduleTable){
    	layer.open({
            type: 1 //此处以iframe举例
            ,title: '扩展'
            ,shade: 0.2
    		,area: ['520px', '350px']   //宽高
            ,maxmin: true
            ,content: $('#opdhtable').html()
            ,btn: ['确定', '关闭'] //只是为了演示
    		,offset: [100] 
			,success:function(){
				$.get('/system/userandrolebuttonstate/list', {pid,'vtype':vType,moduleTable}, function(res) {
					table.render({
                        elem: '#zdhtable'
                        ,data: res.data
                        ,totalRow: false
                        ,limit: res.count
                        ,cols: [[
                            {field: 'buttonName',title: '功能名称', width:170,align: 'center'},
                            {field: 'buttonMark',title: '功能编号', width:170,align: 'center'},
                            {field: 'bEnable',title: '是否启用', width:170,align: 'center',templet:'#isbtn'},
                        ]
					    ]
                        ,defaultToolbar: [{title:'列设置',layEvent: 'fieldSet',icon: 'layui-icon-set'}] //这里在右边显示
                        ,done:function(res, curr, count){
                    
                        }
                    });
                    // console.log(res,9999)
            	})
			}
    		,yes: function(layero, index){
				$.post('/system/userandrolebuttonstate/savepost', {pid,'vtype':vType,moduleTable,'infoItems':JSON.stringify(table.cache.zdhtable)}, function(res) {
					layer.msg(res.msg)
					if(res.code==0){
						setTimeout(function(){
							layer.closeAll();
						},800)
					}
				})
            }
    	})

    }

})

window.isqy=function(index){
	table.cache.zdhtable[index].bEnable=!table.cache.zdhtable[index].bEnable
}

function getData(url){
	dataStr = [];
	$.get(url,function(data,status){
		if(data.count == 0){
			dataStr=[];rend();
		}else{
			for(var i=0;i<data.data.length;i++){
				dataStr.push(data.data[i])
				if(i==data.data.length-1){
					rend();
				}
			}
		}
	});
}


//渲染表格
layui.extend({
        dtree : '/js/layuiadmin-1.2.1/lib/extend/dtree-tp'
    }).use('dtree',function(){
    	var dtree = layui.dtree;
    	CommonTreet = dtree.render({
            elem: "#dhtree",
            data: getTree("/system/menu/listtreejson?menuType=ByModule"),
        });
        dtree.on("node('dhtree')" ,function(obj){
        	var url = '';
        	if(obj.param.level == '1'){
        		url = "/system/userandrolejurisdiction/list?menuPguid="+obj.param.nodeId+"&vType="+vType+"&pid="+pid
        	}else if(obj.param.level == '2'){
        		url = "/system/userandrolejurisdiction/list?menuGuid="+obj.param.nodeId+"&vType="+vType+"&pid="+pid
        	}else if(obj.param.level == '3'){
        		url = "/system/userandrolejurisdiction/list?searchModule="+obj.param.nodeId+"&vType="+vType+"&pid="+pid
        	}
        	getData(url);
        });
    })
function rend(){
	layui.use(['table','form','layer','jquery'], function () {
		var $ = layui.$,layer = layui.layer,form = layui.form,table = layui.table,laydate = layui.laydate;
		$.tablelist.init({
			elem: '#dhtable'
			,cols: [[
				{checkbox: true, fixed: true},
			    {field: 'moduleName', title: '模块名称', width:140, align: 'center'},
			    {field: 'bList', title: '查询', width:60, align: 'center', templet:'#cList'},
			    {field: 'bView', title: '查看', width:60, align: 'center', templet:'#cView'},
			    {field: 'bAdd', title: '新增', width:60, align: 'center', templet:'#cAdd'},
			    {field: 'bEdit', title: '编辑', width:60, align: 'center', templet:'#cEdit'},
			    {field: 'bDelete', title: '删除', width:60, align: 'center', templet:'#cDelete'},
			    {field: 'bCancel', title: '取消', width:60, align: 'center', templet:'#cCancel'},
			    {field: 'bFlow', title: '流转', width:60, align: 'center', templet:'#cFlow'},
			    {field: 'bImport', title: '导入', width:60, align: 'center', templet:'#cImport'},
			    {field: 'bExport', title: '导出', width:60, align: 'center', templet:'#cExport'},
			    {field: 'bPrint', title: '打印', width:60, align: 'center', templet:'#cPrint'},
			    {field: 'bFileUp', title: '上传', width:60, align: 'center', templet:'#cFileUp'},
			    {field: 'bFileDown', title: '下载', width:60, align: 'center', templet:'#cFileDown'},
			    {field: '', title: '操作', width:60, align: 'center', templet:'#operation'}
			]
			]
			,data:dataStr
			,height:'full-100'
			,done: function(res, curr, count){
				//渲染第一列复选框是否选中
		        $.each(dataStr,function(di,dv){
		        	var status = false;
					$.each(setList,function(i,v){
		 				if(dataStr[di][v])status = true;
		 			})
		 			if(status){
		 				$('tr[data-index=' + di + '] td[data-field="0"] input[type="checkbox"]').prop('checked', true);
				        $('tr[data-index=' + di + '] td[data-field="0"] input[type="checkbox"]').attr('value',true);
				        $('tr[data-index=' + di + '] td[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
		 			}
	 			})
			}
		});
		//复选框单行、全选操作(第一列)
		table.on('checkbox(ftable)', function(obj){
			var status = false;
			if(obj.checked){
	 			status = true;
	 		}
			if(obj.type == "one"){
				var lineNum = obj.tr.selector.replace('.layui-table-body tr[data-index="',"");
		 		var lineNum = lineNum.replace('"]', "");
		 		$.each(setList,function(i,v){
	 				dataStr[lineNum][v] = status;
	 			})
	 			$.each(obj.tr[0].children,function(j,k){
	 				if(j!=0||j!=1)$(k).find('input').prop('checked', status);
	 			})
	 			form.render();
		 		rend();
			}else{
				$.each(dataStr,function(di,dv){
					$.each(setList,function(i,v){
		 				dataStr[di][v] = status;
		 			})
	 			})
		 		rend();
			}
		});
		
		//复选框点击事件(排除第一列)
		$(".layui-form-checkbox").click(function(){
			var bName = $(this).prev().attr('name');
			if('layTableCheckbox' != bName){			//排除第一列复选框点击事件
				var dataIndex = $(this).parent().parent().parent().attr('data-index');
				var status = false;
				if($(this).hasClass('layui-form-checked')){
		 			status = true;
		 		}
				dataStr[dataIndex][bName] = status;
				
				//第一列复选框状态(设置选中状态)
				var statusIndex = false;
				$.each(setList,function(i,v){
	 				if(dataStr[dataIndex][v])statusIndex = true;
	 			})
	 			if(statusIndex){
	 				$('tr[data-index=' + dataIndex + '] td[data-field="0"] input[type="checkbox"]').prop('checked', true);
			        $('tr[data-index=' + dataIndex + '] td[data-field="0"] input[type="checkbox"]').attr('value',true);
			        $('tr[data-index=' + dataIndex + '] td[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
	 			}else{
	 				$('tr[data-index=' + dataIndex + '] td[data-field="0"] input[type="checkbox"]').prop('checked', false);
			        $('tr[data-index=' + dataIndex + '] td[data-field="0"] input[type="checkbox"]').attr('value',false);
			        $('tr[data-index=' + dataIndex + '] td[data-field="0"] input[type="checkbox"]').next().removeClass('layui-form-checked');
	 			}
			}
		})
	})
}
var callbackdata = function () {
    return dataStr;
}
</script>
</body>
</html>